<template>
	<div class="cl-chat-message__item" :key="item.id || item.uid" :class="['is-left', 'is-text']">
		<!-- 日期 -->
		<div class="date" v-if="item._date">
			<span>{{ item._date }}</span>
		</div>

		<!-- 内容 -->
		<div class="main">
			<!-- 头像 -->
			<div class="avatar">
				<!-- <img :src="item.avatarUrl" /> -->
				<cl-avatar v-if="!item.msg_type" :src="item.avatar" shape="square" size="medium" />

				<div class="avatar-icon" :class="[item.msg_type]">
					<icon-svg :size="26" name="icon-approve" />
				</div>
			</div>

			<div class="det">
				<div class="content refund-msg">
					<h3 class="mb-1 title">{{ item.refund_user_name }}的退款申请</h3>
					<cl-filter label="审批类型：">退款</cl-filter>
					<cl-filter label="提交时间：">{{ item.created_at }}</cl-filter>
					<cl-filter label="结束时间：">{{ item.finish_time }}</cl-filter>
					<div
						class="refund-status"
						:class="{
							'color-success': item.state == 1,
							'color-danger': [0, 3].includes(item.state)
						}"
					>
						{{ item.state_name }}
					</div>
					<div class="opt-btns">
						<el-button @click="goRefundList">退款列表</el-button>
						<el-button
							type="primary"
							plain
							@click="handleDetail"
							v-if="item.is_audit == 1"
						>
							审批
						</el-button>
						<el-button type="primary" plain @click="handleDetail" v-else>
							查看详情
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	inject: ["$layout", "chat"],

	props: {
		item: {
			type: Object,
			default: () => ({})
		}
	},
	methods: {
		// 跳转oa退款列表
		goRefundList() {
			this.chat.close();
			const { name } = this.$route;
			const { state, biz_id } = this.item;

			let query = {
				biz_id
			};
			if (state == 1) {
				query.oa_status = 1;
			}
			if (name != "OaRefund") {
				this.$router.push({
					name: "OaRefund",
					query
				});
				return;
			}
			this.$bus.$emit("oa-refund:query", query);
		},
		// 打开详情
		handleDetail() {
			console.log(this.item);
			this.$layout.oaRefundDetail(this.item, info => {
				console.log("回调", info);
				// this.item.oa_status = info.oa_status;
				// this.item.is_audit = info.is_audit;
				// this.item.state = info.state;
				// this.item.state_name = info.state_name;
				// this.item.finish_time = info.finish_time;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.avatar-icon {
	width: 40px;
	height: 40px;
	border-radius: 8%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	&.oa {
		background: #f8b652;
	}
}
.refund-msg {
	width: 300px;
	padding: 14px 20px 8px;
	color: #000;
	border-radius: 8px !important;
	.title {
		font-size: 14px;
	}
	.cl-filter {
		margin: 8px 0;
	}
	.refund-status {
		margin: 8px 0;
	}
	.opt-btns {
		border-top: solid 1px $border-main;
		padding-top: 8px;
	}
}
</style>
